<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://sduept.security.el/func"
	template="/template/template.xhtml">
	<ui:define name="head">
	<title>评价进度管理</title>
		<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
.row {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: -3px;
}

.col-sm-12, .col-sm-9 {
    float: left;
    padding-left: 0px;
    padding-right: 0px;
}

.info-box1 {
    display: block;
    min-height: 75px;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 2px;
    margin-bottom: 15px;
}
.info-box-icon1 {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 75px;
    width: 75px;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(0,0,0,0.2);
}

.info-box-number {
    display: block;
    font-size: 22px;
}

.progress.sm, .progress-sm {
    height: 10px;
    margin-bottom: 3px;
    margin-top: 8px;
}

.img-small {
    max-width: 55px;
    max-height: 55px;
    height: auto;
    float: left;
}

.img-normal {
	max-width: 90px;
    max-height: 90px;
    height: auto;
    float: left;
}

.info-box-content1 {
    padding: 5px 10px;
    margin-left: 60px;
}

.pull-right {
    float: right!important;
    font-size: 16px;
}

.nav-tabs-custom {
    margin-bottom: 0px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 3px;
}

	</style>
	
	<script>
		function openInspectionStaionDetail(inStationId) {
			var flag = "false";
			MyModal.showModal("/ui/equipmentAssessment/assessmentplan/dialog/inspectionStation_detail_datatable.xhtml?id="+inStationId+"&amp;isEditable="+flag);
			// MyModal.showModal("/ui/equipmentAssessment/assessmentplan/dialog/inspectionStation_detail_lookup.xhtml?id="+inStationId);
		}
	</script>
	</ui:define>
	
	<ui:define name="content">
		<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
			<p:commandButton value="是" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="否" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
		</p:confirmDialog>
		<div>
			<h:form id="queryForm">
				<div class="box box-primary">
					<div style="height: 50px; padding-top: 10px;padding-left:10px">
						<p:outputLabel value="评价计划：" style="margin-right:10px"/>
						<p:autoComplete placeholder="输入拼音首字母可查" scrollHeight="400" dropdown="true" 
							var="p" itemLabel="#{p.name}" itemValue="#{p.id}" size="50"
							completeMethod="#{inspectionPlanProgressController.complateInspectionPlan}" >
							<p:ajax event="itemSelect" update="detailPanel stationDetailForm"
								listener="#{inspectionPlanProgressController.changeSelectPlan}"/>
						</p:autoComplete>
					</div>
				</div>
				<p:outputPanel id="detailPanel" style="width:100%">
					<div class="row">
						<div class='col-sm-12'>
							<div class='col-sm-9'>
								<div class="box box-primary">
									<div class='box-header with-border'>
										<h5 class='box-title'>#{inspectionPlanProgressController.planDto.plan.name}</h5>
									</div>
									<div class="box-body">
										<div class="row">
											<div class="col-sm-12">
												<div class='col-sm-4'>
													<div class="info-box1">
														<!-- <span class="info-box-icon1 bg-aqua"><i class="glyphicon glyphicon-tag"></i></span> -->
														<span><img class="img-small" src="/resources/img/planProgressIcons/plan.png" /></span>
														<div class="info-box-content">
															<div class="col-sm-12">
																<div class='col-sm-6'>
																	<span class="info-box-text">计划开始时间</span>
																	<span class="info-box-number1">
																		<h:outputText value="#{inspectionPlanProgressController.planDto.plan.startTime}" >
																			<f:convertDateTime pattern="yyyy-MM-dd" />
																		</h:outputText>
																	</span>
																</div>
																<div class='col-sm-6'>
																	<span class="info-box-text">计划结束时间</span>
																	<span class="info-box-number1">
																		<h:outputText value="#{inspectionPlanProgressController.planDto.plan.endTime}" >
																			<f:convertDateTime pattern="yyyy-MM-dd" />
																		</h:outputText>
																	</span>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class='col-sm-4'>
													<div class="info-box1">
														<!-- <span class="info-box-icon1 bg-aqua"><i class="glyphicon glyphicon-th-large"></i></span> -->
														<span><img class="img-small" src="/resources/img/planProgressIcons/actual.png" /></span>
														<div class="info-box-content">
															<div class="col-sm-12">
																<div class='col-sm-6'>
																	<span class="info-box-text">实际开始时间</span>
																	<span class="info-box-number1">
																		<h:outputText value="#{inspectionPlanProgressController.planDto.plan.actualStartTime}" >
																			<f:convertDateTime pattern="yyyy-MM-dd" />
																		</h:outputText>
																	</span>
																</div>
																<div class='col-sm-6'>
																	<span class="info-box-text">实际结束时间</span>
																	<span class="info-box-number1">
																		<h:outputText value="#{inspectionPlanProgressController.planDto.plan.actualEndTime}" >
																			<f:convertDateTime pattern="yyyy-MM-dd" />
																		</h:outputText>
																	</span>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class='col-sm-4'>
													<div class="info-box1">
														<!-- <span class="info-box-icon1 bg-aqua"><i class="fa fa-user"></i></span> -->
														<span><img class="img-small" src="/resources/img/planProgressIcons/responsible.png" /></span>
														<div class="info-box-content">
															<div class="col-sm-12">
																<div class='col-sm-6'>
																	<span class="info-box-text">责任人</span>
																	<span class="info-box-number1">#{inspectionPlanProgressController.planDto.plan.responsible}</span>
																</div>
																<div class='col-sm-6'>
																	<span class="info-box-text">创建人</span>
																	<span class="info-box-number1">#{inspectionPlanProgressController.planDto.plan.creator}</span>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-12">
												<div class="clearfix">
													<span class="pull-left" style="font-size:16px">计划完成率</span>
													<small class="pull-right">
														<h:outputText value="#{inspectionPlanProgressController.planDto.finishRatio}" ><f:convertNumber pattern="#0.0%"/></h:outputText>
						        					</small>
												</div>
												<div class="progress sm">
													<div class="progress-bar progress-bar-green" style="width:#{inspectionPlanProgressController.planDto.finishRatio*100}%">
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class='col-sm-3'>
								<div class="row">
									<div class="info-box">
										<span><img class="img-normal" src="/resources/img/planProgressIcons/all.png" /></span>
										<div class="info-box-content">
											<span class="info-box-text">供电局总数</span>
											<span class="info-box-number">#{inspectionPlanProgressController.planDto.acceptUnitAllMap.size()}</span>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="info-box">
										<span><img class="img-normal" src="/resources/img/planProgressIcons/finish.png" /></span>
										<div class="info-box-content">
											<span class="info-box-text">已完成</span>
											<span class="info-box-number">#{inspectionPlanProgressController.planDto.acceptUnitFinishMap.size()}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</p:outputPanel>
			</h:form>
			<h:form id="stationDetailForm">
				<div class="box box-solid">
					<div class="box-body">
						<div class="nav-tabs-custom">
							<ul class="nav nav-tabs pull-left" >
								<li class="active"><a href="#allPane" data-toggle="tab" >全部</a></li>
								<li><a href="#finishPane" data-toggle="tab" >已完成</a></li>
								<li><a href="#unFinishPane" data-toggle="tab" >未完成</a></li>
							</ul>
							<div class="tab-content no-padding">
								<!-- 全部 -->
								<div class="chart tab-pane active" id="allPane" style="position: relative" >
									<!-- <ui:include src="inspectionPlanCompleteDetail.xhtml" /> -->
									<div class="tab-content no-padding" style="overflow: auto; height: 475px">
										<p:dataTable var="item" emptyMessage="暂无数据" value="#{inspectionPlanProgressController.allStationDtos}" rowKey="#{item.station}"
											paginator="true" rowsPerPageTemplate="10,20,50" paginatorPosition="bottom" rows="10"
											paginatorTemplate="{Customer} {left} {RowsPerPageDropdown} {right} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
											sortBy="#{item.station.inspectionScope}、#{item.station.inspectionExpertGroup}" style="text-align:center">
											<f:facet name="{Customer}">
												<p:outputLabel
													value="总计：#{inspectionPlanProgressController.allStationDtos.size()}条纪录"
													style="margin-right:20px" />
											</f:facet>
											
											<p:column headerText="检查单位" groupRow="true">
												<h:outputText value="#{item.station.inspectionScope}" />
											</p:column>
											<p:column headerText="被检分子公司">
												<h:outputText value="#{item.station.acceptScope}" />
											</p:column>
											<p:column headerText="被检单位">
												<h:outputText value="#{item.station.acceptUnit}" />
											</p:column>
											<p:column headerText="组别">
												<h:outputText value="#{item.station.inspectionExpertGroup}" />
											</p:column>
								  			<p:column headerText="变电站" >
												<h:outputText value="#{item.station.stationName}" />
											</p:column>
								  			<p:column headerText="实际开始时间" >
												<h:outputText value="#{item.station.actualStartTime}" >
													<f:convertDateTime pattern="yyyy-MM-dd" />
												</h:outputText>
											</p:column>
								  			<p:column headerText="实际完成时间" >
												<h:outputText value="#{item.station.actualEndTime}" >
													<f:convertDateTime pattern="yyyy-MM-dd" />
												</h:outputText>
											</p:column>
								  			<p:column headerText="已评价项目" >
												<h:outputText value="#{item.finishedItemCount}" />
											</p:column>
									  			<p:column headerText="未评价项目" >
												<h:outputText value="#{item.unfinishedItemCount}" />
											</p:column>
									  			<p:column headerText="小计">
												<h:outputText value="#{item.allItemCount}" />
											</p:column>
									   		<p:column headerText="评价完成率（%）" >
												<h:outputText value="#{item.finishRate}" style="color:red" rendered="#{item.finishRate lt 0.2}">
													<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
				        						<h:outputText value="#{item.finishRate}" rendered="#{item.finishRate ge 0.2 &amp;&amp; item.finishRate lt 1}">
				        							<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
				        						<h:outputText value="#{item.finishRate}" style="color:green" rendered="#{item.finishRate == 1}">
				        							<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
											</p:column>
									        <p:column style="width:40px;padding:2px">
												<p:commandButton icon="ui-icon-search" title="查看详情" 
													onclick="openInspectionStaionDetail('#{item.station.id}')"/>
											</p:column>
										</p:dataTable>
									</div>
								</div>
								<!-- 已完成 -->
								<div class="chart tab-pane" id="finishPane" style="position: relative" >
									<!-- <ui:include src="inspectionPlanCompleteDetail.xhtml" /> -->
									<div class="tab-content no-padding" style="overflow: auto; height: 475px">
										<p:dataTable var="item" emptyMessage="暂无数据" value="#{inspectionPlanProgressController.finishStationDtos}" rowKey="#{item.station}"
											paginator="true" rowsPerPageTemplate="10,20,50" paginatorPosition="bottom" rows="10"
											paginatorTemplate="{Customer} {left} {RowsPerPageDropdown} {right} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
											sortBy="#{item.station.inspectionScope}、#{item.station.inspectionExpertGroup}" style="text-align:center">
											<f:facet name="{Customer}">
												<p:outputLabel
													value="总计：#{inspectionPlanProgressController.finishStationDtos.size()}条纪录"
													style="margin-right:20px" />
											</f:facet>
											<p:column headerText="检查单位" groupRow="true">
												<h:outputText value="#{item.station.inspectionScope}" />
											</p:column>
											<p:column headerText="被检分子公司">
												<h:outputText value="#{item.station.acceptScope}" />
											</p:column>
											<p:column headerText="被检单位">
												<h:outputText value="#{item.station.acceptUnit}" />
											</p:column>
											<p:column headerText="组别">
												<h:outputText value="#{item.station.inspectionExpertGroup}" />
											</p:column>
								  			<p:column headerText="变电站" >
												<h:outputText value="#{item.station.stationName}" />
											</p:column>
											<p:column headerText="实际开始时间" >
												<h:outputText value="#{item.station.actualStartTime}" >
													<f:convertDateTime pattern="yyyy-MM-dd" />
												</h:outputText>
											</p:column>
								  			<p:column headerText="实际完成时间" >
												<h:outputText value="#{item.station.actualEndTime}" >
													<f:convertDateTime pattern="yyyy-MM-dd" />
												</h:outputText>
											</p:column>
								  			<p:column headerText="已评价项目" >
												<h:outputText value="#{item.finishedItemCount}" />
											</p:column>
								  			<p:column headerText="未评价项目" >
												<h:outputText value="#{item.unfinishedItemCount}" />
											</p:column>
									  			<p:column headerText="小计">
												<h:outputText value="#{item.allItemCount}" />
											</p:column>
									   		<p:column headerText="评价完成率（%）" >
												<h:outputText value="#{item.finishRate}" style="color:red" rendered="#{item.finishRate lt 0.2}">
													<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
				        						<h:outputText value="#{item.finishRate}" rendered="#{item.finishRate ge 0.2 &amp;&amp; item.finishRate lt 1}">
				        							<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
				        						<h:outputText value="#{item.finishRate}" style="color:green" rendered="#{item.finishRate == 1}">
				        							<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
											</p:column>
									        <p:column style="width:40px;padding:2px">
												<p:commandButton icon="ui-icon-search" title="查看详情" 
													onclick="openInspectionStaionDetail('#{item.station.id}')"/>
											</p:column>
										</p:dataTable>
									</div>
								</div>
								<!-- 未完成 -->
								<div class="chart tab-pane" id="unFinishPane" style="position: relative" >
									<!-- <ui:include src="inspectionPlanCompleteDetail.xhtml" /> -->
									<div class="tab-content no-padding" style="overflow: auto; height: 475px">
										<p:dataTable var="item" emptyMessage="暂无数据" value="#{inspectionPlanProgressController.unfinishStationDtos}" rowKey="#{item.station}"
											paginator="true" rowsPerPageTemplate="10,20,50" paginatorPosition="bottom" rows="10"
											paginatorTemplate="{Customer} {left} {RowsPerPageDropdown} {right} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
											sortBy="#{item.station.inspectionScope}、#{item.station.inspectionExpertGroup}" style="text-align:center">
											<f:facet name="{Customer}">
												<p:outputLabel
													value="总计：#{inspectionPlanProgressController.unfinishStationDtos.size()}条纪录"
													style="margin-right:20px" />
											</f:facet>
											<p:column headerText="检查单位" groupRow="true">
												<h:outputText value="#{item.station.inspectionScope}" />
											</p:column>
											<p:column headerText="被检分子公司">
												<h:outputText value="#{item.station.acceptScope}" />
											</p:column>
											<p:column headerText="被检单位">
												<h:outputText value="#{item.station.acceptUnit}" />
											</p:column>
											<p:column headerText="组别">
												<h:outputText value="#{item.station.inspectionExpertGroup}" />
											</p:column>
								  			<p:column headerText="变电站" >
												<h:outputText value="#{item.station.stationName}" />
											</p:column>
									  		<p:column headerText="实际开始时间" >
												<h:outputText value="#{item.station.actualStartTime}" >
													<f:convertDateTime pattern="yyyy-MM-dd" />
												</h:outputText>
											</p:column>
								  			<p:column headerText="实际完成时间" >
												<h:outputText value="#{item.station.actualEndTime}" >
													<f:convertDateTime pattern="yyyy-MM-dd" />
												</h:outputText>
											</p:column>
								  			<p:column headerText="已评价项目" >
												<h:outputText value="#{item.finishedItemCount}" />
											</p:column>
									  			<p:column headerText="未评价项目" >
												<h:outputText value="#{item.unfinishedItemCount}" />
											</p:column>
									  			<p:column headerText="小计">
												<h:outputText value="#{item.allItemCount}" />
											</p:column>
									   		<p:column headerText="评价完成率（%）" >
												<h:outputText value="#{item.finishRate}" style="color:red" rendered="#{item.finishRate lt 0.2}">
													<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
				        						<h:outputText value="#{item.finishRate}" rendered="#{item.finishRate ge 0.2 &amp;&amp; item.finishRate lt 1}">
				        							<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
				        						<h:outputText value="#{item.finishRate}" style="color:green" rendered="#{item.finishRate == 1}">
				        							<f:convertNumber pattern="#0.0%"/>
				        						</h:outputText>
											</p:column>
									        <p:column style="width:40px;padding:2px">
												<p:commandButton icon="ui-icon-search" title="查看详情" 
													onclick="openInspectionStaionDetail('#{item.station.id}')"/>
											</p:column>
										</p:dataTable>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</h:form>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/js/tables/mytable.js" />
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js" />
		<script src="inspectionPlanProgress.js" />
	</ui:define>
</ui:composition>